<template>
  <view class="container">
    <view class="original-nav" :class="{ fixed: isFixed }">原始导航栏</view>
    <view class="content"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isFixed: false,
      originalNavHeight: 0
    };
  },
  methods: {
    handleScroll() {
      const scrollTop = uni.pageScrollTop;
      this.isFixed = scrollTop > this.originalNavHeight;
    }
  },
  onReady() {
    // 获取原始导航栏的高度
    uni.createSelectorQuery().select('.original-nav').boundingClientRect(data => {
      this.originalNavHeight = data.height;
    }).exec();
  },
  onShow() {
    // 添加滚动事件监听
    uni.onWindowScroll(this.handleScroll);
  },
  onHide() {
    // 移除滚动事件监听
    uni.offWindowScroll(this.handleScroll);
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
}
.original-nav {
  height: 50px;
  background-color: #333;
  color: #fff;
  line-height: 50px;
  text-align: center;
  position: relative;
  z-index: 1;
  transition: all 0.3s; /* 平滑过渡效果 */
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}
.content {
  height: 2000px;
  background-color: #f0f0f0;
}
</style>


<!-- <template>
  <view>
    <u-toast ref="uToast"></u-toast>
    <u-cell
      :title="item.title"
	  title-style='red'
      v-for="(item, index) in list"
      :key="index"
      @click="showToast(item)"
      class="sav"
      :border="false"
      :style="{ 'border-bottom': 'none'}"
	  
    >
    </u-cell>
  </view>

</template>

<script>
  export default {
    data() {
      return {
        show: false,
        list: [{
          type: 'default',
          title: '保存',
          message: "保存成功"
        }],
      }
    },
    methods: {
      showToast(params) {
        this.$refs.uToast.show({
          ...params,
        })
      }
    }
  }
</script>

<style scoped>
  .sav {
    color: red;
    opacity: 1;
  }

</style -->>
